﻿<%@ Page Language="C#" AutoEventWireup="true"  CodeBehind="AddTemplatePage.aspx.cs" Inherits="Easy.Web.Pages.EntityPages.AddTemplatePage" %>

<!DOCTYPE html >
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head runat="server">
    <title></title>
    <link href="/_css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="/_css/common.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" type="text/css" href="/_css/iconfont.css" />
    <script src="/_js/jquery-1.9.1.min.js" type="text/javascript"></script>
    <script src="/_js/bootstrap.min.js" type="text/javascript"></script>
    <script src="/_js/json2.js" type="text/javascript"></script>
    <script src="/_js/common.js"></script>
    <script src="/_js/jquery.dragsort-0.5.2.min.js"></script>
    <style>
        .header {
            padding: 10px;
            background-color: white;
            margin-top: 5px;
        }

        .body {
            margin-top: 5px;
        }

            .body > .body_left {
                padding: 10px;
                background-color: white;
                display: inline-block;
                position: fixed;
                overflow-y: auto;
                overflow-x: hidden;
            }

            .body > .body_right {
                width: 200px;
                margin-left: 2px;
                padding: 10px;
                background-color: white;
                display: inline-block;
                position: fixed;
                right: 0;
                overflow-y: auto;
                overflow-x: hidden;
            }

        body {
            background-color: lightgray;
        }

        label.control-label {
            font-weight: normal;
            font-size: 12px;
            color: #666;
            line-height: 32px;
        }

        #visualizationPannel .form-group > label {
            cursor: move;
            cursor: -webkit-grab;
        }


        .unactive {
            background-color: lightgray;
            border-radius: 4px;
        }

        .mui-table-view
        {
            padding-left:0px;
            margin-top:0px;
            margin-bottom:0px;
            list-style-type:none;
            list-style-position:outside;
            list-style-image:none;
            position:relative;
            background-color:rgb(255,255,255);
        }
        .mui-table-view-cell
        {
            overflow:hidden;
            padding-top:11px;
            padding-right:15px;
            padding-bottom:11px;
            padding-left:15px;
            position:relative;
            background-color:inherit;
        }
        .mui-input-row
        {
            overflow:hidden;
            clear:left;
            margin-left:20px;
            margin-right:20px;
        }
        .mui-pull-left
        {
            float:left;
        }
        .mui-pull-right
        {
            float:right
        }
    </style>
</head>
<body>
    <form id="form2" runat="server" visible="True">
        <div style="padding: 10px; background-color: #F7F7F7">
            <span style="line-height: 32px; font-weight: 600; font-size: large; color: darkgray">配置Template</span>
            
            <!-- -->
            <span class="pull-right" style="margin-left: 5px"><a href="#" class="btn btn-warning ng-binding" title="取消" onclick="window.close();"><span class="glyphicon glyphicon-trash">取消</span></a>
            </span>
              <span class="pull-right" style="margin-left: 5px"><a href="#" class="btn btn-warning ng-binding" title="保存" onclick="htmlEncode();combineButtons()"><span class="glyphicon glyphicon-trash">保存</span></a>
            </span>
             <%--<asp:LinkButton ID="LinkButton1" CssClass="btn btn-primary ng-binding pull-right" OnClientClick="htmlEncode();combineButtons();return checkForm();" OnClick="SaveFormStructure_Click" runat="server"><span class="glyphicon glyphicon-floppy-save">保存</span></asp:LinkButton>--%>
            <%--<asp:LinkButton ID="SaveFormStructure" CssClass="btn btn-primary ng-binding pull-right" OnClientClick="htmlEncode();combineButtons();"  runat="server"><span class="glyphicon glyphicon-floppy-save">保存</span></asp:LinkButton>--%>
        </div>
        <asp:HiddenField ID="buttons" runat="server" />
        
        <div class="body">
            <div class="body_left">
                <ul class="nav nav-tabs" role="tablist">
                    <li role="presentation" class="active"><a href="#visualizationPannel" aria-controls="home" role="tab" data-toggle="tab">可视化视图</a></li>
                    <li role="presentation"><a href="#formhtmlPannel" aria-controls="profile" role="tab" data-toggle="tab">HTML</a></li>
                </ul>
                <div class="tab-content">
                    <div role="tabpanel" class="tab-pane active" id="visualizationPannel">
                        <div style="border: 15px solid white;" id="container" class="row gridly">
                           <%-- <div class="col-md-8 form-group brick" id="c_tlm_name">
                                <label for="tlm_name" class="col-md-2 control-label">6<span style="color: red;"> *<span></span></span></label><div class="col-md-10">
                                    <input type="input" class="form-control" id="tlm_name" attname="tlm_name" atttype="nvarchar" />
                                </div>
                            </div>--%>
                        </div>
                    </div>
                    <div role="tabpanel" style="width: 100%; height: 100%" class="tab-pane" id="formhtmlPannel">
                        <asp:TextBox ID="content" Width="100%" Height="100%" runat="server" onchange="$('#container').html($('#content').val());initLeftButton();" TextMode="MultiLine"></asp:TextBox>
                    </div>
                    
                </div>
            </div>
            <div class="body_right">
                <ul id="fields" class="nav nav-pills nav-stacked">
                    <%=Fields %>
                </ul>
            </div>
        </div>
    </form>
    <script>
        $("#buttonContent").html(decodeURI($("#buttons").val()));
        
        function addHover() {
            $("#buttonContent").children().on("mouseenter", function () {
                var div = "<div pid='" + $("#myModalId").val() + "' style='background-color:transparent;left: " + $(this).offset().left + "px;top: " + $(this).offset().top + "px;width: " + $(this).outerWidth() + "px;height: " + $(this).outerHeight() + "px;text-align: center;background:z-index: 99999;position:absolute' onclick='editButton(this);event.stopPropagation();' ></div>";
                $(this).append($(div));
            })
            $("#buttonContent").children().on("mouseleave", function () {
                $(this).children("div[pid]").remove();
            })
        }
        addHover();

        function combineButtons() {
            var buttonshtml = "";
            $("#buttonContent").children().each(function () {
                buttonshtml += $(this).prop('outerHTML');
            })
            $("#buttons").val(encodeURI(buttonshtml));
        }
        function deleteButton() {
            $("#" + $("#myModalId").val()).remove()
        }
        function editButton(o) {
            var button = $(o).parent();
            $("#myModalId").val(button.attr("id"));
            $("#myModalName").val(button.attr("title"));
            $("#myModalCSS").val(button.attr("class"));
            $("#myModalIcon").val(button.children(0).attr("class"));
            $("#myModalJS").val(button.attr("onclick"));
            $('#myModal').modal('show');
            $('#buttonFlag').val(1);
        }

        function cleanModal() {
            $("#myModalId").val("");
            $("#myModalName").val("");
            $("#myModalCSS").val("btn btn-primary");
            $("#myModalIcon").val("");
            $("#myModalJS").val("");
            $("#buttonFlag").val(0);
            $('#myModal').modal('hide');
        }

        function createButton() {
            var flag = $('#buttonFlag').val();
            if (flag == 1) {
                var button = $("#" + $("#myModalId").val());
            }
            else {
                var button = $("<div style='margin-left:5px' class='btn' onclick='" + $("#myModalJS").val() + "'></div>");
            }
            button.attr("title", $("#myModalName").val());
            button.attr("id", $("#myModalId").val());
            button.attr("onclick", $("#myModalJS").val());
            button.addClass($("#myModalCSS").val());
            button.html("");
            button.append("<span class='" + $("#myModalIcon").val() + "'></span>").append("<span>" + $("#myModalName").val() + "</span>");

            if (flag != 1) {
                $("#buttonContent").append(button);
            }
            cleanModal();
            addHover();
        }
        function htmlEncode() {
            window.close();
            var html = $("#content").val();
            if (html != "" && html != null)
            {
                html = html.replace(/\"/g, "'");
            }
            window.opener.document.getElementById("ViewTemplete").value = html;
        }

        function btn_back() {
            window.location.href = "/Pages/EntityPages/AttributeListPage.aspx?Id=" + $.getQueryString("Id");
        }
        var PageJS = new Object();
        $("#container").dragsort({
            dragEnd: function () {
                $('#content').val($('#container').html());
            },
        });
        //$("#container").html("");
        $('#container').html($('#content').val())


        $(function () {
            /*---------------------------------------页面框架布局 begin---------------------------------------------*/
            (function () {
                $(".body_left").height($(window).height() - 134).show();//100是顶部高度
                $(".body_right").height($(window).height() - 134).show();//100是顶部高度
                $(".tab-content").height($(window).height() - 176).show();//100是顶部高度
                $(".body_left").width($(window).width() - 246).show();//100是顶部高度
                $(".body_right").width(200).show();//100是顶部高度
                $(window).resize(function () {
                    $(".body_left").height($(window).height() - 134);//100是顶部高度
                    $(".body_right").height($(window).height() - 134);//100是顶部高度
                    $(".tab-content").height($(window).height() - 176);//100是顶部高度
                    $(".body_left").width($(window).width() - 246);//100是顶部高度
                    $(".body_right").width(200);//100是顶部高度

                    //此处运行两次，避免有些浏览器渲染时候存在BUG
                    $(".body_left").height($(window).height() - 134);//100是顶部高度
                    $(".body_right").height($(window).height() - 134);//100是顶部高度
                    $(".tab-content").height($(window).height() - 176);//100是顶部高度
                    $(".body_left").width($(window).width() - 246);//100是顶部高度
                    $(".body_right").width(200);//100是顶部高度
                });//当浏览器窗口变化时对各窗口大小进行重置      
            })();
            /*---------------------------------------页面框架布局 end---------------------------------------------*/

            /*--------------------------------------左侧元素构建 begin---------------------------------------------*/
            (function () {
                PageJS.build = function (name, displayname, type, size, isnecessary) {
                    var div = $("<div></div>");
                    div.addClass("form-group");
                    div.addClass("col-md-" + size);
                    div.addClass("brick");
                    div.attr("id", "c_" + name);
                    div.attr("atttype", type);

                    div.html('<label for="' + name + '" class="col-md-2 control-label">' + displayname + '\
                                    ' + (isnecessary ? '<span style="color: red;">*</span>' : '') + '\
                              </label>\
                              <div class="col-md-10">\
                                <img src="" />\
                              </div>'
                    );
                    return div;
                }
            })();
            /*---------------------------------------左侧元素构建 end---------------------------------------------*/

            /*--------------------------------------右侧按钮事件 begin---------------------------------------------*/
            (function () {
                $("#fields li").on("click", function () {
                    if ($("#container #c_" + $(this).attr("okey")).length > 0) //移除
                    {
                            $(this).addClass("active");
                            $(this).removeClass("unactive");
                            $('#container').html($('#content').val());
                            var parent = $('#container #c_' + $(this).attr("okey")).parent().eq(0);
                            if (parent.find("span").length > 1)
                            {
                                $('#container #c_' + $(this).attr("okey")).remove();
                                $('#content').val($('#container').html());
                            }
                            else
                            {
                                parent.remove();
                                $('#content').val($('#container').html());
                            }
                    }
                    else   //添加
                    {
                        $('#container').html($('#content').val());;
                        var ps = $('#container').find("p");
                        var type = "0";
                        if (ps.length > 0)    //没有p 或者已有p但是最后一个p里有两个span
                        {
                            var sp=ps.eq(ps.length - 1).find("span");
                            if ( sp.length== 1) //最后一个p里只有一个span且最后一个span是左边
                            {
                                if (sp.eq(0).attr("class") == "mui-pull-left")
                                {
                                    type = "1";
                                }
                            }
                        }
                        if (type == "0") {
                            var s="<p class='mui-input-row'><span class='mui-pull-left' id='c_" + $(this).attr("okey") + "'>" + $(this).text() + ":{" + $(this).attr("okey") + "}</span></p>";
                            if ($('#container').html() == null || $('#container').html()=="") {
                                $("#content").val( s );
                            }
                            else {
                                $("#content").val($('#container').html() + s);
                            }

                        }
                        else if (type == "1") {
                            var p = ps.eq(ps.length - 1);    //最后一个p
                            var s = p.html() + "<span class='mui-pull-right' id='c_" + $(this).attr("okey") + "'>" + $(this).text() + ":{" + $(this).attr("okey") + "}</span>";
                            p.html(s);
                            $("#content").val($('#container').html());
                        }
                        $(this).removeClass("active");
                        $(this).addClass("unactive");
                        $('#container').html($('#content').val())
                    }
                })
            })();
           
            /*---------------------------------------右侧按钮事件 end---------------------------------------------*/

            /*--------------------------------------加载时候处理左侧按钮 begin---------------------------------------------*/
            (function () {
                initLeftButton();
            })();
            function initLeftButton() {
                $("#fields li").each(function () {
                    if ($("#container #c_" + $(this).attr("okey")).length > 0) {
                        //$("#container #c_" + $(this).attr("okey")).remove();
                        $(this).removeClass("active");
                        $(this).addClass("unactive");
                    }
                });
            }
            /*---------------------------------------加载时候处理左侧按钮 end---------------------------------------------*/

            
        })
        /*---------------------------------------处理父页面传入的html begin---------------------------------------------*/
        $(function () {
            (function () {
                var oldhtml = window.opener.document.getElementById("ViewTemplete").value;
                $("#content").val(oldhtml);
                $('#container').html(oldhtml);
                $("#fields li").each(function () {
                    if ($("#container #c_" + $(this).attr("okey")).length > 0) {
                        //$("#container #c_" + $(this).attr("okey")).remove();
                        $(this).removeClass("active");
                        $(this).addClass("unactive");
                    }
                });
            }
        )()
        });
        /*---------------------------------------处理父页面传入的html end---------------------------------------------*/
    </script>
</body>
</html>

